<!-- 用户操作日志详情页面： 包括 
	操作：查看|导入|导出，[新增|删除|]，修改： 
			无，		[前值|后值]， 	对比值
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<#include "/ftl/commonCSS.ftl">
<#include "/ftl/commonJS.ftl">
<#include "/ftl/combobox.ftl">
<#assign actionMap={"I":"新增","U":"修改","Q":"查询", "D":"删除","EXP":"导出", "IMP":"导入","V":"查看"}>
<#assign single=log.action??&&log.action!='Q'&&log.action!='EXP'&&log.action!='V'&&log.action!=''>
<link type="text/css" rel="stylesheet" href="${rc.getContextPath()}/css/jquery.mCustomScrollbar.css">
<script type="text/javascript" src="${rc.getContextPath()}/js/jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
<div id="content-d" class="MC_con content light">
	<div class="NorForm ConList">
	<#if single>
       	<div class="nav" id="tab" style="margin-top:10px;">
        	<ul>
            	<li class="current">日志详情</li>
                <li>数据详情</li>
        	</ul>
       	</div>
     </#if>
        <div class="tabss2">
        	<div>
            	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
		                <td><label class="LabName"><span>操作时间：</span></label><div class="Check_Radio FontDarkBlue"><#if log.changeTime??>${log.changeTime?datetime}</#if></div></td>
                        <td><label class="LabName"><span>用户名：</span></label><div class="Check_Radio FontDarkBlue">${log.userName!}</div></td>
                        <td><label class="LabName"><span>组织：</span></label><div class="Check_Radio FontDarkBlue">${log.orgCode!}</div></td>
                      </tr>
                      <tr>
                        <td class="LeftTd"><label class="LabName"><span>应用名称：</span></label><div class="Check_Radio FontDarkBlue">${log.appCode!}</div></td>
                        <td ><label class="LabName"><span>模块名称：</span></label><div class="Check_Radio FontDarkBlue">${log.tableName!log.modelCode}</div></td>
                        <!-- <td><label class="LabName"><span>模块名称：</span></label><div class="Check_Radio FontDarkBlue">${log.modelCode!}</div></td> -->
                        <td><label class="LabName"><span>操作类型：</span></label><div class="Check_Radio FontDarkBlue">
                        	<#if actionMap[log.action!]??>${actionMap[log.action!]}<#else>${log.action}</#if>
                        </div></td>
                      </tr>
                      <tr>
                        <td class="LeftTd"><label class="LabName"><span>操作IP：</span></label><div class="Check_Radio FontDarkBlue">${log.operateIp!}</div></td>
                        <td><label class="LabName"><span>记录ID：</span></label><div class="Check_Radio FontDarkBlue">${log.recordId!}</div></td>
                        <td><label class="LabName"><span>令牌：</span></label><div class="Check_Radio FontDarkBlue">${log.token!}</div></td>
                      </tr>
                      <tr>
                        <td class="LeftTd"><label class="LabName"><span>客户端类型：</span></label><div class="Check_Radio FontDarkBlue"><#if log.clientType??>${log.clientType?upper_case}<#else>PC</#if></div></td>
                         <td  colspan="4"><label class="LabName"><span>备注：</span></label>
                        <!-- <textarea name="textarea" id="textarea"  rows="5" readonly style="resize:none;width:650px;border:0px;" class="area1">${log.memoInfo!}</textarea> -->
                        <div class="Check_Radio FontDarkBlue" id="memoInfo"></div>
                        </td>
                      </tr>
            	</table>
           	</div>
      	<#if single>
			<div class="hide">
				<div id="valueShow">
				
				</div>
	       	</div>
	    </#if>   	
       	</div>
     </div>
</div>
<script type="text/javascript">
var valueShowPanle={
	$id:$('#valueShow'),	//html外容器
	logId:${log.logId},		//日志id
	action:'${log.action}',	//操作日志的操作 [I|D|IMP|EXP] U
	compareFlg:false,		//是否要对比
	showTyle:'table',		//显示格式table|json
	clobData:{},			//日志数据
	changeValue:{},
	changeValueBefore:{},
	changeValueAfter:{},
	comment:{},				//<property: {name, value,.after, before, flag.... }>
	parseError:false,		//值解析出错
	loadClobData:function(){
		var that=this;
		$.ajax('${rc.getContextPath()}/userOperateLog/getClobData.jhtml',{
			async:false,
			data:{logId:${log.logId}},
			type:'POST',
			dataType:'json'
		}).done(function(data){
			that.clobData=data.clobLog;
			//设置memoinfo
			$('#memoInfo').html(data.clobLog.memoInfo);
			//把comment 改成<propertyName, {name}>
			$.each(data.comment,function(){
				that.comment[this.propertyName.toLowerCase()]={name:this.entityComment};
			});
		}).fail(function(){});
	},
	show:function(logId){
		this.loadClobData();
		//渲染方式table|json
		this.preprocess();
		if(this.parseError)
		{
			this.showOnError();				
			return;
		}	
		if(this.compareFlg&&this.showTyle=='table')
			this.compareTable();
		else if(this.compareFlg&&this.showTyle=='json')
			this.compareJson();
		else if(!this.compareFlg&&this.showTyle=='table')
			this.singleTable();
		else if(!this.compareFlg&&this.showTyle=='json')
			this.singleJson();
	},
	preprocess:function(){
		var clobData=this.clobData;
		//判断 是否有对比
		this.compareFlg=this.action=='U';
		//判断 数据是否是一维
		//解析数据
		try{
			if(this.action=='U')
			{
				if(clobData.changeValeBefore)
					this.changeValueBefore=$.parseJSON(clobData.changeValeBefore);
				if(clobData.changeValeAfter)
					this.changeValueAfter=$.parseJSON(clobData.changeValeAfter);
				var beforeIsSimple=this.isSimpleObject(this.changeValueBefore),
					afterIsSimple=this.isSimpleObject(this.changeValueAfter);
				this.showTyle=beforeIsSimple&&afterIsSimple?'table':'json';
				this.showTyle='table';
			}
			else
			{
				var changeValue=clobData.changeValeBefore||clobData.changeValeAfter||clobData.changeVale;
				if(changeValue)
					this.changeValue=$.parseJSON(changeValue);	
				this.showTyle=this.isSimpleObject(this.changeValue)?'table':'json';
				this.showTyle='table';
			}
		}catch(e){
			this.parseError=true;
		}
	},
	isSimpleObject:function(obj){
		var res=true,value;
		for(var prop in obj)
		{
			value=obj[prop];
			if(typeof(value)=="object"&&value!=null)
			{
				if(value.date!==undefined&&value.day!==undefined&&value.hours!==undefined
					&&value.minutes!==undefined&&value.month!==undefined&&value.seconds!==undefined
					&&value.time!==undefined&&value.timezoneOffset!==undefined&&value.year!==undefined)
				{
					obj[prop]=new Date(value.time).Format('yyyy-MM-dd hh:mm:ss');
					continue;
				}
				if(value instanceof Array&&value.length==0)
				{
					delete obj[prop];
					continue;
				}
				res=false;
				break;
			}	
		}
		return res;
	},
	/**4种渲染方式*/
	singleTable:function(){
		if(!this.changeValue)
			return;
		//把注释和数据对应上
		var commentItem,realKey;
		for(realKey in this.changeValue)
		{
			commentItem=this.comment[realKey.toLowerCase()];
			if(commentItem)
				commentItem.value=this.changeValue[realKey];
			//else
				//this.comment[realKey]={name:realKey,value:this.changeValue[realKey]};	
		}
		//渲染数据
		var html=[];
		for(realKey in this.comment)
		{
			commentItem=this.comment[realKey];
			commentItem.value=commentItem.value!=null&&commentItem.value!='null'?commentItem.value:'';
			html.push('<tr><td style="text-align:center">'+commentItem.name+'</td><td>'+commentItem.value+'</td></tr>');
		}
		this.$id.html('<table style="width:100%"><tr><td style="text-align:center"><b>字段</b></td><td><b>值</b></td></tr>'+html.join('')+'</table>');
	},
	compareTable:function(){
		if(!this.changeValueAfter||!this.changeValueBefore)
			return;
		//把注释和数据对应上
		var commentItem,realKey;
		for(realKey in this.changeValueBefore)
		{
			commentItem=this.comment[realKey.toLowerCase()];
			if(commentItem)
				commentItem.before=this.changeValueBefore[realKey];
			//else
				//this.comment[realKey]={name:realKey,before:this.changeValueBefore[realKey]};	
		}
		for(realKey in this.changeValueAfter)
		{
			commentItem=this.comment[realKey.toLowerCase()];
			if(commentItem)
				commentItem.after=this.changeValueAfter[realKey];
			//else
				//this.comment[realKey]={name:realKey,after:this.changeValueAfter[realKey]};
		}
		//渲染数据
		var html=[],before,after;
		for(realKey in this.comment)
		{
			commentItem=this.comment[realKey];
			before=commentItem.before!=null&&commentItem.before!='null'?commentItem.before:'';
			after=commentItem.after!=null&&commentItem.after!='null'?commentItem.after:'';
			html.push('<tr><td style="text-align:center">');
			if(before==after)
			{
				html.push(commentItem.name);
				html.push('</td><td>');
				html.push(before);
				html.push('</td><td>');
				html.push(after);
			}	
			else
			{	
				html.push('<font color="red"><b>'+commentItem.name+'</b></font>');
				html.push('</td><td>');
				html.push('<font color="red"><b>'+before+'</b></font>');
				html.push('</td><td>');
				html.push('<font color="red"><b>'+after+'</b></font>');
			}
			html.push('</td></tr>');
		}
		this.$id.html('<table style="width:100%"><tr><td style="text-align:center"><b>字段</b></td><td><b>旧值</b></td><td><b>新值</b></td></tr>'+html.join('')+'</table>');
	},
	singleJson:function(){
		if(!this.changeValue)
			return;
		var jsonStr=this.formatJson(this.changeValue,{},0,'','');
		this.$id.html('<p>'+jsonStr.substr(0,jsonStr.length-1)+'</p>');
	},
	/**格式化json，redPaths是需要标红的路径*/
	formatJson:function(json,redPathsSet,depth,curPath,curDir){
		var hasHead=curDir&&curDir.indexOf(']')==-1;
		if(curDir&&!this.comment[curDir.toLowerCase()])
			return '';
		
		var isObject=typeof(json)=='object',
			isArray=json instanceof Array,
			paddingSpace=hasHead?'&nbsp;'.repeat(depth*4):'',
			tailPaddingSpace=curDir?'&nbsp;'.repeat(depth*4):'',
			curRedFlg=redPathsSet[curPath],
			head=(curRedFlg?'<font color="red">':'')+(hasHead?'"'+(this.comment[curDir.toLowerCase()]?this.comment[curDir.toLowerCase()].name:curDir)+'"'+':':''),
			tail=curRedFlg?'</font>':'',
			eleStr=[],last,lastIndex;
		if(isArray)
		{
			for(var i=0;i<json.length;i++)
				eleStr.push(this.formatJson(json[i],redPathsSet,depth,curPath+'['+i+']','['+i+']'));
		}
		else if(isObject)
		{
			for(var i in json)
				eleStr.push(this.formatJson(json[i],redPathsSet,depth+1,curPath+'.'+i,i));
		}
		
		if(eleStr.length>0)
		{
			lastIndex=eleStr.length-1;
			while(eleStr[eleStr.length-1]&&eleStr[eleStr.length-1].length==0)
				lastIndex=lastIndex-1;
			if(lastIndex>=0)
			{
				last=eleStr[lastIndex];
				if(last.substr(last.length-1)==',')
					last=last.substr(0,last.length-1);
				else if(last.substr(last.length-1)=='>')
					last=last.substr(0,last.length-6);
				eleStr[lastIndex]=last;
			}	
		}
		if(isArray)
			return paddingSpace+head+'['+eleStr.join('')+']'+tail+',';
		else if(isObject)
			return paddingSpace+head+'{<br/>'+eleStr.join('')+'<br/>'+tailPaddingSpace+'}'+tail+',';
		else if(typeof(json)=='string')
			return paddingSpace+head+'"'+json+'"'+tail+',<br/>';
		else
			return paddingSpace+head+json+tail+',<br/>';
	},
	/**查找2个json不等的路径*/
	diffJson:function(json1,json2,redPathsSet,curPath){
		var typeJson1=typeof(json1),
			typeJson2=typeof(json2);
		//类型不一样肯定不相等
		if(typeJson1!=typeJson2)
		{
			redPathsSet[curPath]=true;
			return;
		}
		if(json1 instanceof Array)
		{
			if(json1.length!=json2.length)
			{
				redPathsSet[curPath]=true;
				return;
			}
			for(var i=0;i<json1.length;i++)
				this.diffJson(json1[i],json2[i],redPathsSet,curPath+'['+i+']');					
		}	
		//都是基本类型，直接比较
		if(typeJson1!='object')
		{
			if(json1!=json2)
				redPathsSet[curPath]=true;
			return;
		}
		//是对象类型，进去比较属性
		var keys={},key,value;
		for(key in json1)
		{
			value=json1[key];
			json1[key]=value!=null&&value!='null'?value:'';
			keys[key]=true;
		}
		for(key in json2)
		{
			value=json2[key];
			json2[key]=value!=null&&value!='null'?value:'';
			keys[key]=true;
		}
		//循环键值进行对比
		for(key in keys)
			this.diffJson(json1[key],json2[key],redPathsSet,curPath+'.'+key)			
	},
	compareJson:function(){
		if(!this.changeValueAfter||!this.changeValueBefore)
			return;
		var redPathsSet={};
		this.diffJson(this.changeValueAfter,this.changeValueBefore,redPathsSet,'');
		var json1=this.formatJson(this.changeValueBefore,redPathsSet,0,'',''),
			json2=this.formatJson(this.changeValueAfter,redPathsSet,0,'','');
		json1=json1.substr(0,json1.length-1);
		json2=json2.substr(0,json2.length-1);
		this.$id.html('<div style="float:left;width:50%">'+json1+'</div>'+'<div style="float:left;width:50%">'+json2+'</div>');
	},
	showOnError:function(){
		var html=[];
		html.push('<table style="width:100%">');
		this.clobData.changeValue&&html.push('<tr><td>值</td><td>'+this.clobData.changeValue+'</td></tr>');
		this.clobData.changeValueBefore&&html.push('<tr><td>旧值</td><td>'+this.clobData.changeValueBefore+'</td></tr>');
		this.clobData.changeValueAfter&&html.push('<tr><td>新值</td><td>'+this.clobData.changeValueAfter+'</td></tr>');
		html.push('</table>');
		this.$id.html(html.join(''));
	}
};
 
(function($){
	$(window).load(function(){
		var options = {
			axis : "yx",
			theme : "minimal-dark"
		};
		enableScrollBar('content-d',options);
	});
	<#if single>
	valueShowPanle.show(${log.logId});
	<#else>
	valueShowPanle.loadClobData();
	</#if>
})(jQuery);
</script>
</body>
</html>